<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
  <title>设备选择</title>
  <link href="css/title.css" th:href="@{/css/device.css}" rel="stylesheet">
  <div th:replace="common :: common_header"></div>
</head>
<body>
<!-- 设备选择 -->
  <form action="/main.html" method="post" onsubmit="return beforeSubmit(this)">
  <h1 style="text-align: center">
    请选择设备
  </h1><br />
    <label id="device_error" style="color: red" th:text="${DEVICE_ERROR}"></label>
    <input id="force" type="text" th:name="force" th:value="false" hidden="hidden"/><br />
  <div>
    <label th:each="mqtt:${mqttList}">
      <div style="border: solid 1px; margin-left: 1px">
      <input name="id" type="radio" th:value="${mqtt.getId()}"/>
        <img src="img/device.ico">
        <span style="" th:text="${mqtt.getDeviceName}" ></span>
      </div>
    </label>
  </div>
  <div style="text-align: center">
    <button class="btn-ok" type="submit">确认</button>
  </div>
</form>
</body>
<script type="text/javascript">
  function beforeSubmit(form){
    if(form.id.value===''){
      alert('请选择设备！');
      return false;
    }
    var deviceError = document.getElementById("device_error");
    console.log("device:" + deviceError.innerHTML);
    if (deviceError.innerHTML.toString() !== "") {
      console.log("不为空");
      if (confirm('该设备已经有人在使用了,是否强制下线')) {
        document.getElementById("force").value = 'true';
      } else {
        document.getElementById("force").value = 'false';
      }
    }
    return true;
  }
  function getQueryVariable(variable)
  {
    const query = window.location.search.substring(1);
    const vars = query.split("&");
    for (let i=0; i<vars.length; i++) {
      const pair = vars[i].split("=");
      if(pair[0] === variable){return pair[1];}
    }
    return false;
  }
  $(document).ready(function () {
    const id = getQueryVariable('id');
    console.log('id'+id);
    if (id != null) {
      const inputs = document.getElementsByTagName('input');
      console.log('inputs'+inputs+inputs.length);
      for (let i =0; i<inputs.length; i++) {
        if (id===inputs[i].value) {
          inputs[i].checked = true;
        }
      }
    }
  })
</script>
</html>